<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>填充图 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <link rel="preload" href="/my/assets/css/0.styles.82a18d97.css" as="style"><link rel="preload" href="/my/assets/js/app.fc4964fc.js" as="script"><link rel="preload" href="/my/assets/js/513.edb84f11.js" as="script"><link rel="preload" href="/my/assets/js/1395.a2439c19.js" as="script"><link rel="preload" href="/my/assets/js/958.935c6658.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.82a18d97.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link router-link-active">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link router-link-active">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/my/ui/charts/" aria-current="page" class="sidebar-link">概念和原理</a></li><li><a href="/my/ui/charts/chart.html" class="sidebar-link">图表基础组件</a></li><li><a href="/my/ui/charts/line.html" class="sidebar-link">折线图</a></li><li><a href="/my/ui/charts/bar.html" class="sidebar-link">柱状图</a></li><li><a href="/my/ui/charts/pie.html" class="sidebar-link">饼图</a></li><li><a href="/my/ui/charts/map.html" class="sidebar-link">地图</a></li><li><a href="/my/ui/charts/radar.html" class="sidebar-link">雷达图</a></li><li><a href="/my/ui/charts/cloud.html" class="sidebar-link">标签云</a></li><li><a href="/my/ui/charts/fill.html" aria-current="page" class="active sidebar-link">填充图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#基本用法" class="sidebar-link">基本用法</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#配置参考" class="sidebar-link">配置参考</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#a-simple-example" class="sidebar-link">A Simple Example</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#multiple-waves" class="sidebar-link">Multiple Waves</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#color-and-opacity" class="sidebar-link">Color and Opacity</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#static-waves" class="sidebar-link">Static Waves</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#still-water" class="sidebar-link">Still Water</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#change-a-single-wave" class="sidebar-link">Change A Single Wave</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#background-style" class="sidebar-link">Background Style</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-style" class="sidebar-link">Outline Style</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#shape" class="sidebar-link">Shape</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#animation" class="sidebar-link">Animation</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#change-text" class="sidebar-link">Change Text</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#shadow" class="sidebar-link">Shadow</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#tooltip" class="sidebar-link">Tooltip</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#click-event" class="sidebar-link">Click Event</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#non-interactable" class="sidebar-link">Non-interactable</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#api" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#data-number-object" class="sidebar-link">data {(number|Object)[]}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#color-string" class="sidebar-link">color {string[]}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#shape-string" class="sidebar-link">shape {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#center-string" class="sidebar-link">center {string[]}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#radius-string" class="sidebar-link">radius {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#amplitude-number" class="sidebar-link">amplitude {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#wavelength-string-number" class="sidebar-link">waveLength {string|number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#phase-number" class="sidebar-link">phase {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#period-number-auto-function" class="sidebar-link">period {number|'auto'|function}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#direction-string" class="sidebar-link">direction {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#waveanimation-boolean" class="sidebar-link">waveAnimation {boolean}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#animationeasing-string" class="sidebar-link">animationEasing {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#animationeasingupdate-string" class="sidebar-link">animationEasingUpdate {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#animationduration-number" class="sidebar-link">animationDuration {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#animationdurationupdate-number" class="sidebar-link">animationDurationUpdate {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-show-boolean" class="sidebar-link">outline.show {boolean}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-borderdistance-number" class="sidebar-link">outline.borderDistance {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-itemstyle-bordercolor-string" class="sidebar-link">outline.itemStyle.borderColor {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-itemstyle-borderwidth-number" class="sidebar-link">outline.itemStyle.borderWidth {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-itemstyle-shadowblur-number" class="sidebar-link">outline.itemStyle.shadowBlur {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#outline-itemstyle-shadowcolor-string" class="sidebar-link">outline.itemStyle.shadowColor {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#backgroundstyle-color-string" class="sidebar-link">backgroundStyle.color {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#backgroundstyle-borderwidth-string" class="sidebar-link">backgroundStyle.borderWidth {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#backgroundstyle-bordercolor-string" class="sidebar-link">backgroundStyle.borderColor {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#backgroundstyle-itemstyle-shadowblur-number" class="sidebar-link">backgroundStyle.itemStyle.shadowBlur {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#backgroundstyle-itemstyle-shadowcolor-string" class="sidebar-link">backgroundStyle.itemStyle.shadowColor {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#backgroundstyle-itemstyle-opacity-number" class="sidebar-link">backgroundStyle.itemStyle.opacity {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#itemstyle-opacity-number" class="sidebar-link">itemStyle.opacity {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#itemstyle-shadowblur-number" class="sidebar-link">itemStyle.shadowBlur {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#itemstyle-shadowcolor-string" class="sidebar-link">itemStyle.shadowColor {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#emphasis-itemstyle-opacity-number" class="sidebar-link">emphasis.itemStyle.opacity {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-show-boolean" class="sidebar-link">label.show {boolean}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-color-string" class="sidebar-link">label.color {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-insidecolor-string" class="sidebar-link">label.insideColor {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-fontsize-number" class="sidebar-link">label.fontSize {number}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-fontweight-string" class="sidebar-link">label.fontWeight {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-align-string" class="sidebar-link">label.align {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-baseline-string" class="sidebar-link">label.baseline {string}</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/fill.html#label-position-string-string" class="sidebar-link">label.position {string|string[]}</a></li></ul></li></ul></li><li><a href="/my/ui/charts/gl.html" class="sidebar-link">GL 3D图表</a></li><li><a href="/my/ui/charts/geojson.html" class="sidebar-link">GeoJson</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="填充图"><a href="#填充图" class="header-anchor">#</a> 填充图</h1> <h2 id="基本用法"><a href="#基本用法" class="header-anchor">#</a> 基本用法</h2> <!----><h2 id="配置参考"><a href="#配置参考" class="header-anchor">#</a> 配置参考</h2> <h3 id="a-simple-example"><a href="#a-simple-example" class="header-anchor">#</a> A Simple Example</h3> <p>To create a Liquid Fill Chart, you need to have a series with type of <code>'liquidFill'</code>. A basic option may be:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="http://g.recordit.co/RsjUlo69JN.gif" alt="A simple liquid fill chart"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xr1XplzB4e" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="multiple-waves"><a href="#multiple-waves" class="header-anchor">#</a> Multiple Waves</h3> <p>It is easy to create a liquid fill chart will multiple waves, either to represent multiple data, or to improve the visual effect of the chart.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>This creates a chart wit waves at position of 60%, 50%, 40%, and 30%.</p> <p><img src="http://g.recordit.co/HJ3z3ITqzL.gif" alt="Multiple waves"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xSyIEWMBNl" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="color-and-opacity"><a href="#color-and-opacity" class="header-anchor">#</a> Color and Opacity</h3> <p>To set colors for liquid fill chart series, set <code>color</code> to be an array of colors. To set opacity, use <code>itemStyle.opacity</code> and <code>itemStyle.emphasis.opacity</code> for normal style and hover style.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'#0f0'</span><span class="token punctuation">,</span> <span class="token string">'rgb(0, 0, 255)'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                opacity<span class="token operator">:</span> <span class="token number">0.6</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
            itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                opacity<span class="token operator">:</span> <span class="token number">0.9</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p><img src="http://g.recordit.co/ZVRBdxO6oY.gif" alt="Color and opacity"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xrJpDC704l" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>You may also set the color and opacity of a single data item by:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span>
            itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
                opacity<span class="token operator">:</span> <span class="token number">0.6</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                    opacity<span class="token operator">:</span> <span class="token number">0.9</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><img src="http://g.recordit.co/Smz5G8ypvO.gif" alt="Color and opacity of a single data item"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xBJPCRXR4l" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="static-waves"><a href="#static-waves" class="header-anchor">#</a> Static Waves</h3> <p>To provent the waves from moving left or right, you may simply set <code>waveAnimation</code> to be <code>false</code>. To disable the animation of waves raising, set <code>animationDuration</code> and <code>animationDurationUpdate</code> to be 0.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        waveAnimation<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        animationDuration<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        animationDurationUpdate<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="http://g.recordit.co/Wze7eblLPM.gif" alt="Static waves"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xH1VfVVREx" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="still-water"><a href="#still-water" class="header-anchor">#</a> Still Water</h3> <p>You may set the <code>amplitude</code> to be 0 to make still waves.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        amplitude<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        waveAnimation<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>It is recommended to set <code>waveAnimation</code> to be false in this case to disable animation for performance consideration.</p> <p><img src="http://g.recordit.co/EQ5pnYDAtN.gif" alt="Still water"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xHy1NHVCNx" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="change-a-single-wave"><a href="#change-a-single-wave" class="header-anchor">#</a> Change A Single Wave</h3> <p>To change a single wave, overwrite the options in data item.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
            direction<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
            itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                color<span class="token operator">:</span> <span class="token string">'red'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><img src="http://g.recordit.co/31VHgsRV2y.gif" alt="Change a single wave"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xry6CHNCVl" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="background-style"><a href="#background-style" class="header-anchor">#</a> Background Style</h3> <p>You can use backgroundStyle option to set the stroke, fill style of background shape.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        backgroundStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            borderWidth<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
            borderColor<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
            color<span class="token operator">:</span> <span class="token string">'yellow'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><img src="http://g.recordit.co/nXCxOcV4IQ.gif" alt="Change border width and color"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xSkJoa_kBx" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="outline-style"><a href="#outline-style" class="header-anchor">#</a> Outline Style</h3> <p>To hide the outline, just set <code>outline.show</code> to be <code>false</code>.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        outline<span class="token operator">:</span> <span class="token punctuation">{</span>
            show<span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="http://g.recordit.co/nIxiw5KAGC.gif" alt="No outline"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xSySxR_JBg" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="shape"><a href="#shape" class="header-anchor">#</a> Shape</h3> <p>Shape of water fill chart. It can be:</p> <ul><li>one of the default symbols: <code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>;</li> <li><code>'container'</code>: a shape that fully fills the container.</li> <li>an SVG path starting with <code>'path://'</code>.</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> options <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        shape<span class="token operator">:</span> <span class="token string">'diamond'</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><img src="http://g.recordit.co/1v9490ijKg.gif" alt="Diamond wave"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2],
        shape: 'container',
        outline: {
            show: false
        }
    }]
};
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="http://g.recordit.co/iuMJckv5lB.gif" alt="Fill the container"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xrko4E9zKb&amp;v=1" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.55</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.25</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        radius<span class="token operator">:</span> <span class="token string">'60%'</span><span class="token punctuation">,</span>
        outline<span class="token operator">:</span> <span class="token punctuation">{</span>
            show<span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        backgroundStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            borderColor<span class="token operator">:</span> <span class="token string">'#156ACF'</span><span class="token punctuation">,</span>
            borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            shadowColor<span class="token operator">:</span> <span class="token string">'rgba(0, 0, 0, 0.4)'</span><span class="token punctuation">,</span>
            shadowBlur<span class="token operator">:</span> <span class="token number">20</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        shape<span class="token operator">:</span> <span class="token string">'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token punctuation">{</span>
            position<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'38%'</span><span class="token punctuation">,</span> <span class="token string">'40%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token string">'ECharts\nLiquid Fill'</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            fontSize<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
            color<span class="token operator">:</span> <span class="token string">'#D94854'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p><img src="http://g.recordit.co/CfZq1v9tzv.gif" alt="ECharts Liquid Fill"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xH1HouM9Sl" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="animation"><a href="#animation" class="header-anchor">#</a> Animation</h3> <p>Generally speaking, there are two types of animations in liquid fill charts.</p> <p>The first type is initial animation, which has the effect of wave raising. The easing method of this animation is controlled with <code>animationEasing</code> and its duration with <code>animationDuration</code>.</p> <p>The second type is the update animation, which is usually used when data changes and wave height changes. They are controlled with <code>animationEasingUpdate</code> and <code>animationDurationUpdate</code>.</p> <p>For example, to disable the raising animation and set update animation time to be two seconds with <code>cubicOut</code> easing, you can use the following option:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        animationDuration<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        animationDurationUpdate<span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span>
        animationEasingUpdate<span class="token operator">:</span> <span class="token string">'cubicOut'</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
            data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="http://g.recordit.co/qt87aYQ9SO.gif" alt="Update animation"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xSk8I5JcHe" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="change-text"><a href="#change-text" class="header-anchor">#</a> Change Text</h3> <p>By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data <code>[0.6, 0.5, 0.4, 0.3]</code>, default text is <code>60%</code>.</p> <p>To change the text, you may use <code>label.formatter</code>, which can be set to a string or function.</p> <p>If it is a string, <code>{a}</code> refers to series name, <code>{b}</code> to data name, and <code>{c}</code> to data value.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'Liquid Fill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'First Data'</span><span class="token punctuation">,</span>
            value<span class="token operator">:</span> <span class="token number">0.6</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token punctuation">{</span>
            formatter<span class="token operator">:</span> <span class="token string">'{a}\n{b}\nValue: {c}'</span><span class="token punctuation">,</span>
            fontSize<span class="token operator">:</span> <span class="token number">28</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>Label text of this example is <code>'Liquid Fill\nFirst Data\nValue: 0.6'</code>.</p> <p><img src="http://g.recordit.co/3Zcftu8tpL.gif" alt="Label formatter as string"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xrkwSn1qHx" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>This has the same result as using <code>formatter</code> as a function:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'Liquid Fill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'First Data'</span><span class="token punctuation">,</span>
            value<span class="token operator">:</span> <span class="token number">0.6</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> param<span class="token punctuation">.</span>seriesName <span class="token operator">+</span> <span class="token string">'\n'</span>
                    <span class="token operator">+</span> param<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">'\n'</span>
                    <span class="token operator">+</span> <span class="token string">'Value:'</span> <span class="token operator">+</span> param<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            fontSize<span class="token operator">:</span> <span class="token number">28</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><a href="http://gallery.echartsjs.com/editor.html?c=xHk5831cHg" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Text position is at the center by default. <code>label.position</code> can be set to be <code>'inside'</code>, <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code>, or horizontal and vertical positions like <code>['10%', '20%']</code>, which means <code>'10%'</code> to the left (controlled by <code>label.align</code>, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>) and <code>'20%'</code> to the top (controlled by <code>label.baseline</code>, which can be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>).</p> <h3 id="shadow"><a href="#shadow" class="header-anchor">#</a> Shadow</h3> <p>By default, waves and outline have shadow on them. Here's how to change them.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            shadowBlur<span class="token operator">:</span> <span class="token number">0</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        outline<span class="token operator">:</span> <span class="token punctuation">{</span>
            borderDistance<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
            itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                borderWidth<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
                borderColor<span class="token operator">:</span> <span class="token string">'#156ACF'</span><span class="token punctuation">,</span>
                shadowBlur<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                shadowColor<span class="token operator">:</span> <span class="token string">'rgba(255, 0, 0, 1)'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="http://g.recordit.co/nIy6lZaS8C.gif" alt="Change shadow"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xrJO4CyqSl" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="tooltip"><a href="#tooltip" class="header-anchor">#</a> Tooltip</h3> <p>To add tooltip:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">'Liquid Fill'</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
        show<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="http://g.recordit.co/S1zQTS6B0G.gif" alt="Tooltip"></p> <p><a href="http://gallery.echartsjs.com/editor.html?c=xSJqXeg5He" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="click-event"><a href="#click-event" class="header-anchor">#</a> Click Event</h3> <p>To add click event on waves:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// do something useful here</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>Like any other chart types, the above code will only trigger events on waves. If you want to track events on the whole canvas or specific elements, you may add listener to zrender like:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>chart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="non-interactable"><a href="#non-interactable" class="header-anchor">#</a> Non-interactable</h3> <p>To make an element (e.g., a wave) non-interactable, simply set <code>silent</code> to be <code>true</code>.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        silent<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><a href="http://gallery.echartsjs.com/editor.html?c=xSJqev71Jb" target="_blank" rel="noopener noreferrer">Run<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="api"><a href="#api" class="header-anchor">#</a> API</h2> <p>Default option for liquid fill charts are:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
    data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>

    color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'#294D99'</span><span class="token punctuation">,</span> <span class="token string">'#156ACF'</span><span class="token punctuation">,</span> <span class="token string">'#1598ED'</span><span class="token punctuation">,</span> <span class="token string">'#45BDFF'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    radius<span class="token operator">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span>
    amplitude<span class="token operator">:</span> <span class="token string">'8%'</span><span class="token punctuation">,</span>
    waveLength<span class="token operator">:</span> <span class="token string">'80%'</span><span class="token punctuation">,</span>
    phase<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
    period<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
    direction<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
    shape<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>

    waveAnimation<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    animationEasing<span class="token operator">:</span> <span class="token string">'linear'</span><span class="token punctuation">,</span>
    animationEasingUpdate<span class="token operator">:</span> <span class="token string">'linear'</span><span class="token punctuation">,</span>
    animationDuration<span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span>
    animationDurationUpdate<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>

    outline<span class="token operator">:</span> <span class="token punctuation">{</span>
        show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        borderDistance<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            color<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
            borderColor<span class="token operator">:</span> <span class="token string">'#294D99'</span><span class="token punctuation">,</span>
            borderWidth<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
            shadowBlur<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
            shadowColor<span class="token operator">:</span> <span class="token string">'rgba(0, 0, 0, 0.25)'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    backgroundStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        color<span class="token operator">:</span> <span class="token string">'#E3F7FF'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        opacity<span class="token operator">:</span> <span class="token number">0.95</span><span class="token punctuation">,</span>
        shadowBlur<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
        shadowColor<span class="token operator">:</span> <span class="token string">'rgba(0, 0, 0, 0.4)'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    label<span class="token operator">:</span> <span class="token punctuation">{</span>
        show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        color<span class="token operator">:</span> <span class="token string">'#294D99'</span><span class="token punctuation">,</span>
        insideColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
        fontSize<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
        fontWeight<span class="token operator">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>

        align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        baseline<span class="token operator">:</span> <span class="token string">'middle'</span>
        position<span class="token operator">:</span> <span class="token string">'inside'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
        itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            opacity<span class="token operator">:</span> <span class="token number">0.8</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br></div></div><h3 id="data-number-object"><a href="#data-number-object" class="header-anchor">#</a> data {(number|Object)[]}</h3> <p>Value of each data item should be between 0 and 1.</p> <p>The data item can also be an object to configure the option for a single item.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
            itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                color<span class="token operator">:</span> <span class="token string">'red'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>This defines a chart with the second wave of red color.</p> <h3 id="color-string"><a href="#color-string" class="header-anchor">#</a> color {string[]}</h3> <p>Wave colors.</p> <h3 id="shape-string"><a href="#shape-string" class="header-anchor">#</a> shape {string}</h3> <p>Shape of water fill chart. It can be one of the default symbols: <code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>. Or, an SVG path starting with <code>'path://'</code>.</p> <h3 id="center-string"><a href="#center-string" class="header-anchor">#</a> center {string[]}</h3> <p>Position of the chart. The first value is x position, the second one is the y position. Each of the values can be a relative value like <code>'50%'</code>, which is relative to the smaller value of container width and height, or an absolute value like <code>100px</code>.</p> <h3 id="radius-string"><a href="#radius-string" class="header-anchor">#</a> radius {string}</h3> <p>Radius of the chart, which can be a relative value like <code>'50%'</code>, which is relative to the smaller value of container width and height, or an absolute value like <code>100px</code>.</p> <h3 id="amplitude-number"><a href="#amplitude-number" class="header-anchor">#</a> amplitude {number}</h3> <p>Amplitude of the wave, in pixels or percentage. If it is in percentage, it's relative to the diameter.</p> <h3 id="wavelength-string-number"><a href="#wavelength-string-number" class="header-anchor">#</a> waveLength {string|number}</h3> <p>Wave length of the wave, which can be a relative value like <code>'50%'</code>, which is relative to the diameter, or an absolute value like <code>'100px'</code> or <code>100</code>.</p> <h3 id="phase-number"><a href="#phase-number" class="header-anchor">#</a> phase {number}</h3> <p>Phase of wave, in radian system. By default, it is set to be <code>'auto'</code>, when each wave has a phase of <code>Math.PI / 4</code> larger than the previous one.</p> <h3 id="period-number-auto-function"><a href="#period-number-auto-function" class="header-anchor">#</a> period {number|'auto'|function}</h3> <p>Milliseconds that it takes to move forward a wave-length. By default, it is set to be <code>'auto'</code>, when the wave at the front has a greater speed.</p> <p>It can also be a formatter function.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'liquidFill'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0.6</span><span class="token punctuation">,</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        radius<span class="token operator">:</span> <span class="token string">'70%'</span><span class="token punctuation">,</span>
        phase<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        <span class="token function-variable function">period</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// This function is called four times, each for a data item in series.</span>
            <span class="token comment">// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.</span>
            <span class="token keyword">return</span> <span class="token number">2000</span> <span class="token operator">*</span> index <span class="token operator">+</span> <span class="token number">1000</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="direction-string"><a href="#direction-string" class="header-anchor">#</a> direction {string}</h3> <p>Direction that the waves moving in, which should either be <code>'right'</code>, or <code>'left'</code>.</p> <h3 id="waveanimation-boolean"><a href="#waveanimation-boolean" class="header-anchor">#</a> waveAnimation {boolean}</h3> <p>Whether to enable wave from moving left or right.</p> <h3 id="animationeasing-string"><a href="#animationeasing-string" class="header-anchor">#</a> animationEasing {string}</h3> <p>Easing methods for initial animation, when waves raise from the bottom at the beginning.</p> <h3 id="animationeasingupdate-string"><a href="#animationeasingupdate-string" class="header-anchor">#</a> animationEasingUpdate {string}</h3> <p>Easing methods for other animation, for example, when data value changes and wave position changes.</p> <h3 id="animationduration-number"><a href="#animationduration-number" class="header-anchor">#</a> animationDuration {number}</h3> <p>Initial animation duration, in milliseconds.</p> <h3 id="animationdurationupdate-number"><a href="#animationdurationupdate-number" class="header-anchor">#</a> animationDurationUpdate {number}</h3> <p>Other animation duration, in milliseconds.</p> <h3 id="outline-show-boolean"><a href="#outline-show-boolean" class="header-anchor">#</a> outline.show {boolean}</h3> <p>Whether to display outline.</p> <h3 id="outline-borderdistance-number"><a href="#outline-borderdistance-number" class="header-anchor">#</a> outline.borderDistance {number}</h3> <p>Distance between border and inner circle.</p> <h3 id="outline-itemstyle-bordercolor-string"><a href="#outline-itemstyle-bordercolor-string" class="header-anchor">#</a> outline.itemStyle.borderColor {string}</h3> <p>Border color.</p> <h3 id="outline-itemstyle-borderwidth-number"><a href="#outline-itemstyle-borderwidth-number" class="header-anchor">#</a> outline.itemStyle.borderWidth {number}</h3> <p>Border width.</p> <h3 id="outline-itemstyle-shadowblur-number"><a href="#outline-itemstyle-shadowblur-number" class="header-anchor">#</a> outline.itemStyle.shadowBlur {number}</h3> <p>Outline shadow blur size.</p> <h3 id="outline-itemstyle-shadowcolor-string"><a href="#outline-itemstyle-shadowcolor-string" class="header-anchor">#</a> outline.itemStyle.shadowColor {string}</h3> <p>Outline shadow color.</p> <h3 id="backgroundstyle-color-string"><a href="#backgroundstyle-color-string" class="header-anchor">#</a> backgroundStyle.color {string}</h3> <p>Background fill color.</p> <h3 id="backgroundstyle-borderwidth-string"><a href="#backgroundstyle-borderwidth-string" class="header-anchor">#</a> backgroundStyle.borderWidth {string}</h3> <p>Background stroke line width.</p> <h3 id="backgroundstyle-bordercolor-string"><a href="#backgroundstyle-bordercolor-string" class="header-anchor">#</a> backgroundStyle.borderColor {string}</h3> <p>Background stroke line width.</p> <h3 id="backgroundstyle-itemstyle-shadowblur-number"><a href="#backgroundstyle-itemstyle-shadowblur-number" class="header-anchor">#</a> backgroundStyle.itemStyle.shadowBlur {number}</h3> <p>Background shadow blur size.</p> <h3 id="backgroundstyle-itemstyle-shadowcolor-string"><a href="#backgroundstyle-itemstyle-shadowcolor-string" class="header-anchor">#</a> backgroundStyle.itemStyle.shadowColor {string}</h3> <p>Background shadow color.</p> <h3 id="backgroundstyle-itemstyle-opacity-number"><a href="#backgroundstyle-itemstyle-opacity-number" class="header-anchor">#</a> backgroundStyle.itemStyle.opacity {number}</h3> <p>Background opacity.</p> <h3 id="itemstyle-opacity-number"><a href="#itemstyle-opacity-number" class="header-anchor">#</a> itemStyle.opacity {number}</h3> <p>Wave opacity.</p> <h3 id="itemstyle-shadowblur-number"><a href="#itemstyle-shadowblur-number" class="header-anchor">#</a> itemStyle.shadowBlur {number}</h3> <p>Wave shadow width.</p> <h3 id="itemstyle-shadowcolor-string"><a href="#itemstyle-shadowcolor-string" class="header-anchor">#</a> itemStyle.shadowColor {string}</h3> <p>Wave shadow color.</p> <h3 id="emphasis-itemstyle-opacity-number"><a href="#emphasis-itemstyle-opacity-number" class="header-anchor">#</a> emphasis.itemStyle.opacity {number}</h3> <p>Wave opacity when hover.</p> <h3 id="label-show-boolean"><a href="#label-show-boolean" class="header-anchor">#</a> label.show {boolean}</h3> <p>Whether to display label text.</p> <h3 id="label-color-string"><a href="#label-color-string" class="header-anchor">#</a> label.color {string}</h3> <p>Color of text when display on background.</p> <h3 id="label-insidecolor-string"><a href="#label-insidecolor-string" class="header-anchor">#</a> label.insideColor {string}</h3> <p>Color of text when display on wave.</p> <h3 id="label-fontsize-number"><a href="#label-fontsize-number" class="header-anchor">#</a> label.fontSize {number}</h3> <p>Label font size.</p> <h3 id="label-fontweight-string"><a href="#label-fontweight-string" class="header-anchor">#</a> label.fontWeight {string}</h3> <p>Label font weight.</p> <h3 id="label-align-string"><a href="#label-align-string" class="header-anchor">#</a> label.align {string}</h3> <p>Text align, which should be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p> <h3 id="label-baseline-string"><a href="#label-baseline-string" class="header-anchor">#</a> label.baseline {string}</h3> <p>Text vertical align, which should be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p> <h3 id="label-position-string-string"><a href="#label-position-string-string" class="header-anchor">#</a> label.position {string|string[]}</h3> <p>Text position is at the center by default. <code>label.position</code> can be set to be <code>'inside'</code>, <code>'left'</code>, <code>'right'</code>, <code>'top'</code>, <code>'bottom'</code>, or horizontal and vertical positions like <code>['10%', '20%']</code>, which means <code>'10%'</code> to the left and <code>'20%'</code> to the top.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/ui/charts/cloud.html" class="prev">
        标签云
      </a></span> <span class="next"><a href="/my/ui/charts/gl.html">
        GL 3D图表
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.fc4964fc.js" defer></script><script src="/my/assets/js/513.edb84f11.js" defer></script><script src="/my/assets/js/1395.a2439c19.js" defer></script><script src="/my/assets/js/958.935c6658.js" defer></script>
  </body>
</html>
